<template>
	<div class="base-Chart" :id="uuid"></div>
</template>
<script>
	import echarts from 'echarts'
	import uuidv1 from 'uuid/v1'

	export default {
		data() {
			return {
				myChart: {}, //生成的图表实例
				uuid: '', //唯一id
			}
		},
		props: {
			dataMin: {
				type: Number,
				default: 0
			},
			dataMax: {
				type: Number,
				default: 100
			},
			seriesData: {
				type: Array,
				default() {
					return []
				}
			},
			center: {
				type: Array,
				default() {
					return ['50%', '50%']
				}
			},
			axisLineColor: {
				type: Array,
				default() {
					return []
				}
			},
			pointerLength: {
				type: [String,Number],
				default: '60%'
			},
			startAngle: {
				type: Number,
				default: 220
			},
			endAngle: {
				type: Number,
				default: -40
			},
			splitNumber: { //刻度分割密度
				type: Number,
				default: 80
			},
			bgcImg: {
				type: String,
				default: ''
			},
			unit: {
				type: String,
				default: ''
			}

		},
		computed: {
		},
		created() {
			this.uuid = uuidv1()
		},
		mounted() {
			
			this.initChart()
		},
		methods: {
			//刷新图表
			refreshChart() {
				setTimeout(() => {
					this.myChart.resize()
				},10)
			},
			//生成仪表盘
			initChart() {
				this.myChart = echarts.init(document.getElementById(this.uuid))
				this.setOption()
				if(this.fn) {
					this.myChart.on('click',this.fn)
				}
			},
			//设置仪表盘
			setOption() {
				let _this = this
				let bgcImg = new Image()
				bgcImg.src = require(`../assets/imgs/${this.bgcImg}`)
				bgcImg.onload = () => {
					this.refreshChart()
				}
				let title = {
					title: {
						show: false,
		            }
				}

				let totalValue = this.dataMax - this.dataMin
				let totalAngle = this.startAngle - this.endAngle
				let dataAngle = Math.floor(this.seriesData[0].value / totalValue * totalAngle)
				let splitNum = Math.floor(this.seriesData[0].value / totalValue * this.splitNumber)

				let series = {
			        series: [
			        	{ //前半圈
							radius: '80%',
							type: 'gauge',
	                        center: this.center,
	        				startAngle: this.startAngle,
	        				endAngle: this.startAngle - dataAngle,
				            splitNumber: 1,
				            //圆盘轴线
				            axisLine: {
				                lineStyle: {
				                    width: 20,
				                    // 透明度设置为0
				                    opacity: 0,
				                    color: this.axisLineColor
				                }
				            },
				            //分隔线
				            splitLine: {
				                show: false
				            },
				            //刻度线
				            axisTick: {
				            	show: true,
				                length: 10,
				                splitNumber: splitNum,
				                lineStyle: {
				                    width: 2,
				                    // 给点颜色
				                    color: {
		                                image: bgcImg,
		                                repeat: 'no-repeat'
		                            },
				                }
				            },
				            //刻度文字
				            axisLabel: {
				            	show: false,
				            	textStyle: {
				            		color: '#fff',
				            		fontSize: 8
				            	}
				            },
				            //指针
				            pointer: {
				            	show: false,
				            },
				            //数据详情
				            detail: {
				            	show: false,
				            },
				            min: this.dataMin,
				            max: this.dataMax,
				            data: this.seriesData
						},
						{ //后半圈
							radius: '80%',
							type: 'gauge',
	                        center: this.center,
	        				startAngle: this.startAngle - dataAngle,
	        				endAngle : this.endAngle,
				            splitNumber: 1,
				            //圆盘轴线
				            axisLine: {
				                lineStyle: {
				                    width: 20,
				                    // 透明度设置为0
				                    opacity: 0,
				                    color: this.axisLineColor
				                }
				            },
				            //分隔线
				            splitLine: {
				                show: false
				            },
				            //刻度线
				            axisTick: {
				            	show: true,
				                length: 10,
				                splitNumber: this.splitNumber - splitNum,
				                lineStyle: {
				                    width: 2,
				                    color: '#ccc'
				                }
				            },
				            //刻度文字
				            axisLabel: {
				            	show: false,
				            	textStyle: {
				            		color: '#fff',
				            		fontSize: 8
				            	}
				            },
				            //指针
				            pointer: {
				            	show: false,
				            },
				            //数据详情
				            detail: {
				            	show: false,
				            },
				            min: this.dataMin,
				            max: this.dataMax,
				            data: this.seriesData
						},
						{ //度数
							radius: '80%',
							type: 'gauge',
	                        center: this.center,
	        				startAngle: this.startAngle,
	        				endAngle : this.endAngle,
				            splitNumber: 1,
				            //圆盘轴线
				            axisLine: {
				                lineStyle: {
				                    width: 20,
				                    // 透明度设置为0
				                    opacity: 0,
				                    color: this.axisLineColor
				                }
				            },
				            //分隔线
				            splitLine: {
				                show: false
				            },
				            //刻度线
				            axisTick: {
				            	show: false,
				                length: 10,
				                splitNumber: this.splitNumber - splitNum,
				                lineStyle: {
				                    width: 2,
				                    color: '#999'
				                }
				            },
				            //刻度文字
				            axisLabel: {
				            	show: false,
				            	textStyle: {
				            		color: '#fff',
				            		fontSize: 8
				            	}
				            },
				            //指针
				            pointer: {
				            	show: false,
				            },
				            //数据详情
				            detail: {
				            	show: true,
				            	formatter(value) {
				            	    return value + _this.unit
				            	}
				            },
				            min: this.dataMin,
				            max: this.dataMax,
				            data: this.seriesData,
						},
			        ]
				}
			    let option = Object.assign(title,series)
			    this.myChart.setOption(option,true)
			},
			//清除实例
			disposeChart() {
				this.myChart.dispose()
			}
		},
		watch: {
			seriesData: {
				deep: true,
				handler() {
					this.initChart()
				}
			},
			dataMin: {
				deep: true,
				handler() {
					this.initChart()
				}
			},
			dataMax: {
				deep: true,
				handler() {
					this.initChart()
				}
			},
		}

	}
</script>
<style>
	.base-Chart {
		width: 100%;
		height: 100%;
	}
</style>